<template>
    <div class="r">
        <div class="none" v-if="tuiJianList.length===0">
            <img src="@/assets/error.jpg" />
            没有找到相关的评论，请重新查询
        </div>
        <el-card class="box-card" v-for="(item,index) in tuiJianList" :key="item.id">
            <div class="card" @click.prevent="toinfo(tuiJianList[index])">
                <a  class="t1">{{ item.title }}</a>
                <div class="c">{{item.content}}</div>
                <div class="t2">
                    <img src="@/assets/autor.png"/>{{item.teacher.name}}
                    <img src="@/assets/time.png"/>{{ item.time }}
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "ForumList",
    data() {
        return {
            tuiJianList: []
        }
    },
    methods: {
        toinfo(info) {
            this.$router.push({name: "Forum-info", params: {info}})
        }
    },
    mounted() {
        console.log("global", this.$GLOBAL.tuiJianList)
        this.tuiJianList = this.$GLOBAL.tuiJianList;
        console.log("test-list1", this.tuiJianList)
    },
    watch:{
        '$store.state.List':function (newVal){
            console.log("watch-list",newVal)
            console.log(this.$store.state.List)
            this.tuiJianList=newVal
        },
        '$store.state.info':function (newVal){
            console.log("watch-info",newVal);
            let info=newVal;
            this.$router.push({name: "Forum-info", params: {info}})
        }
    }
}
</script>

<style scoped>
.none{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card a{
    font-size: 30px;
    color: #000;
    text-decoration: none;
}
.card .t1:hover{
    color: coral;
}
.card .c{
    margin: 20px 0;
}
.card .t2{
    display: flex;
    align-items: center;
}
.card .t2 img{
    height: 100%;
    width: 20px;
    margin-right: 10px;
}
.card .t2 img:not(:nth-child(1)){
    margin-left: 30px;
}

.el-card {
    margin-bottom: 30px;
}
.el-card:hover{
    background-color: #eff2f5;
}
</style>
